<template>
  <div>
    <ul>
      <li>
        <h1>{{ name }}</h1>
        <h3>{{ desc }}</h3>
        <p>总共{{ num }}个</p>

        <!-- 
    props是只读属性
    我们通过props接收的父组件传递过来的数据，只能读取和使用，不能进行修改！！！！！
    无论传递过来的是基本类型还是对象还是数组，都要遵守这个只读的约定
     -->
        <!-- 报错 Unexpected mutation of "num" prop -->
        <button @click="num++">+1</button>
        <button @click="o.a++">修改o的值{{ o }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Item",
    data() {
      return {};
    },
    props: ["name", "desc", "id", "num", "o"],
  };
</script>

<style></style>
